<template>
    <view class="bg-[#F8F8F8] min-h-screen">
        <view class="mt-[20rpx] px-[40rpx] text-[30rpx] font-medium bg-white pb-[60rpx]">
            <view class="py-[34rpx] flex items-center justify-between border-b border-[#EFEFEF]">

                <image class="w-[152rpx] h-[152rpx] rounded-full  left-[36rpx]" :src="avatarUrl"></image>
                <view class="flex items-center">
                    <button :plain="true" open-type="chooseAvatar" @chooseavatar="onchooseAddress"
                        class="w-full bg-transparent m-0 p-0 border-0  rounded-full"> <text
                            class="mr-2 text-[#979797] text-[30rpx]">更换头像</text></button>

                    <u-icon name="arrow-right" color="#3F3F3F" size="18"></u-icon>
                </view>

            </view>
            <view class="py-[34rpx] flex items-center border-b border-[#EFEFEF]">
                <text>姓名:</text>
                <input v-model="name" class="ml-[30rpx] " type="text" placeholder="请填写真实姓名">
            </view>
            <view @click="sexShow = true" class="py-[34rpx] flex items-center border-b border-[#EFEFEF] w-full">
                <text>性别:</text>
                <input :disabled="true" v-model="sex" class="ml-[30rpx] flex-1 " type="text" placeholder="请选择性别">
                <u-picker @confirm="sexConfirm" @close="sexShow = false" :show="sexShow" :columns="columns"></u-picker>
                <u-icon name="arrow-down" color="#3F3F3F" size="18"></u-icon>
            </view>
            <view @click="show = true" class="py-[34rpx]  flex items-center border-b border-[#EFEFEF] w-full">
                <text>出生日期:</text>
                <input :disabled="true" v-model="birthDate" class="ml-[30rpx] flex-1 " type="text"
                    placeholder="请选择出生日期">
                <u-datetime-picker @cancel="show = false" minDate="1950-01-01" :show="show" @confirm="birthDateChange"
                    v-model="value1" mode="date"></u-datetime-picker>

                <u-icon name="arrow-down" color="#3F3F3F" size="18"></u-icon>
            </view>
            <view @click="getChooseLocation" class="py-[34rpx] flex items-center border-b border-[#EFEFEF] w-full">
                <text>居住地:</text>
                <input v-model="addressName" :disabled="true" class="ml-[30rpx] flex-1" type="text" placeholder="">
                <u-icon name="map-fill" color="#007BFF" size="18"></u-icon>
            </view>
            <view class="py-[34rpx] ">
                <view class="mb-[30rpx]">感兴趣内容:</view>
                <u-checkbox-group v-model="selectValue">
                    <u-checkbox :customStyle="{ marginBottom: '8px', width: '33%' }"
                        v-for="(item, index) in checkboxList" :key="index" :label="item.name" :name="item.name">
                    </u-checkbox>


                </u-checkbox-group>
            </view>
            <view class="mt-[105rpx] flex justify-center">
                <view @click="sumbit"
                    class="w-[208rpx] rounded font-medium text-[30rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                    确定</view>
            </view>
        </view>
        <u-popup :show="successful" @close="successful = false" mode="center" round="12" :safeAreaInsetBottom="false">
            <view class=" bg-white flex flex-col items-center w-[80vw] rounded pt-[82rpx] pb-[60rpx]">
                <u-icon name="weixin-circle-fill" color="#28C445" size="57"></u-icon>

                <view @click="bindWechat" class="mt-[32rpx] text-[#FD755D] text-[38rpx] font-bold">绑定微信>></view>
                <view class="mt-[126rpx] flex justify-center">
                    <view @click="goIndex"
                        class="w-[208rpx] rounded font-medium text-[30rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                        取消</view>
                </view>
            </view>

        </u-popup>
    </view>
</template>
<script setup>
import api from "@/api/api"
import { ref, reactive } from 'vue'
const avatarUrl = ref("https://gangantao.com/image/20241216/489657c8-7f43-436b-a626-c1d7e390588a.png")
const selectValue = ref([])
const successful = ref(false)
const show = ref(false)
const value1 = ref(new Date())
const birthDate = ref("")
const address = ref("")
const addressName = ref("")
const columns = ref([["男", "女"]])
const name = ref("")
const sex = ref("")
const sexShow = ref(false)
const checkboxList = ref([])
const mobile = ref("")
const navigateTo = (url) => {
    uni.navigateTo({
        url
    })
}
const goIndex = () => {
    uni.switchTab({
        url: '/pages/my/my'
    })
}
const onchooseAddress = async (e) => {
    uni.showLoading({ title: "上传中" })
    uni.uploadFile({
        url: "https://ys.yangjc.com/api/v1/upload/upload",
        filePath: e.detail.avatarUrl,
        name: 'file[]',
        success: (res) => {

            avatarUrl.value = JSON.parse(res.data).data.urls[0]
            uni.hideLoading()
        }
    })
    // avatarUrl.value = e.detail.avatarUrl
    // console.log(e)
    // let data = {
    //     file: [e.detail.avatarUrl]
    // };
    // const res = await api.upload(data);
    // console.log(res)



}
const getHobbiesList = async () => {
    uni.showLoading({ title: "加载中" })
    const res = await api.hobbiesList()
    if (res.code == 200) {
        checkboxList.value = res.data
        uni.hideLoading()
    } else {
        uni.showToast({ title: res.msg, icon: "none" })
    }
}
const birthDateChange = (e) => {
    const date = new Date(e.value);

    // 获取年份
    const year = date.getFullYear();
    // 获取月份（注意：getMonth() 返回值是 0 - 11，所以要加 1）
    const month = String(date.getMonth() + 1).padStart(2, '0');
    // 获取日期
    const day = String(date.getDate()).padStart(2, '0');

    // 组合成年月日格式
    birthDate.value = `${year}-${month}-${day}`;
    show.value = false
}
const getChooseLocation = () => {

    uni.chooseLocation({
        success: (res) => {

            address.value = res.address
            addressName.value = res.name
        },
        fail: (err) => {
            console.log(err)
        }
    })
}
const sexConfirm = (e) => {
    sex.value = e.value[0]
    sexShow.value = false
}
const sumbit = async () => {

    uni.showLoading({ title: "加载中" })


    const res = await api.studentSave({
        name: name.value,
        gender: sex.value,
        mobile: mobile.value,
        birthdate: birthDate.value,
        residence: address.value + addressName.value,
        interests: [...selectValue.value],
        avatar: avatarUrl.value

    })

    if (res.code == 200) {
        uni.showToast({ title: "提交成功", icon: "none" })
       const timer =   setTimeout(() => {
            uni.switchTab({
                url: '/pages/my/my'
            })
            clearTimeout(timer)
        }, 1500);
    } else {
        uni.showToast({ title: res.msg, icon: "none" })
    }

}
getHobbiesList()
onLoad((option) => {

    if (option.phone) {
        mobile.value = option.phone
    }
})
const bindWechat = () => {
    uni.showLoading({ title: "加载中" })
    uni.login({
        success: (res) => {
            api.wechatBind({
                code: res.code
            }).then(ret => {
                if (ret.code == 200) {
                    uni.showLoading({ title: "绑定成功" })
                    const timer = setTimeout(() => {
                        uni.hideLoading()
                        goIndex()
                        clearTimeout(timer)
                    }, 1000);
                } else {
                    uni.showToast({ title: ret.msg, icon: "none" })
                }
            })



        }
    })

}
</script>
<style scoped>
button[plain] {

    border: 0;

}
</style>